<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .commodity {
        width: 200px;
        height: 60px;
        margin: auto;
        display: flex;
        line-height: 60px;
        justify-content: center;
        margin-bottom: 30px;
    }

    tr,
    th,
    td {
        text-align: center;
    }

    .box {
        width: 300px;
        height: 300px;
        border: 1px solid black;
        text-align: center;
        padding-top: 70px;
        /* position: relative; */
        display: none;
        z-index: 10;
        position: fixed;
        top: 20%;
        left: 38%;
    }

    .wrong {
        position: absolute;
        top: 10px;
        left: 250px;
        margin: auto;
        font-size: 30px;
    }

    .hideobj {
        width: 100%;
        height: 100%;
        z-index: 9;
        display: none;
        position: fixed;
    }

    #mailbox {
        margin-bottom: 50px;
    }

    p {
        font-size: 24px;
        /* position: absolute;
        top: 270px;
        left: 1475px; */
        text-align: center;
    }
</style>

<body>
    <!-- 遮盖层 -->
    <div class="hideobj"></div>
    <!-- 添加商品按钮 -->
    <button class="commodity">添加商品</button>
    <!-- 添加商品值 -->
    <div class="box">
        <span class="wrong">×</span>
        商品名称<input type="text" class="name"><br><br><br>
        商品价格<input type="text" class="price"><br><br><br>
        商品库存<input type="text" class="inventory"><br><br><br>
        <button class="send">发送</button>
    </div>
    <!-- 表格 -->
    <div id="mailbox">
        <table class="table table-striped table-bordered table-hover table-condensed"
            style="width: 1200px;margin: auto;">
            <thead class="thead1">
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品库存</th>
                    <th>添加时间</th>
                    <th>商品操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <table class="table table-striped table-bordered table-hover table-condensed" style="width: 1200px;margin: auto;">
        <thead class="thead1">
            <tr>
                <th><input type="checkbox" id="quanxuan"></th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>数量</th>
                <!-- <th>小计</th> -->
            </tr>
        </thead>
        <tbody id="tbody2"></tbody>
    </table>
    <div id="box">
        <p>总价:<span>0</span>￥</p>
    </div>
    
</body>
<script>
    var goodsList = [],
        shopCarList = []
    $(function () {
        showShopCarList()
        showGoodsList()
        countPrice()
        // 显示添加列表
        $('.commodity').click(function () {
            $('.box').show(500);
            $('.hideobj').css({ background: 'black', opacity: '0.2' }).show(500);
        })
        // 关闭添加列表
        $('.wrong').click(function () {
            $('.box').hide(500);
            $('.hideobj').hide(500);
        })
        // 发布按钮
        $('.send').click(function () {
            var name = $('.name').val();
            var price = $('.price').val();
            var inventory = $('.inventory').val();
            var goods = {
                name: name,
                price: price,
                stock: inventory,
                add_time: new Date().toLocaleString()
            }
            goodsList.push(goods)
            localStorage.setItem('goodsList', JSON.stringify(goodsList))
            showShopCarList()
            $('#myModal').modal('hide')
        })
        // 添加商品列表
        function showShopCarList() {
            goodsList = localStorage.getItem('goodsList') ? JSON.parse(localStorage.getItem('goodsList')) : []
            var str = '';
            for (let i in goodsList) {
                str += `<tr>
                            <td>${goodsList[i].name}</td>
                            <td>${goodsList[i].price}</td>
                            <td>${goodsList[i].stock}</td>
                            <td>${goodsList[i].add_time}</td>
                            <td>
                                <a href='#' data-del='del'>删除</a>&emsp;|&emsp;
                                <a href='#' data-shop='shop' data-id="${i}" >加入购物车</a>
                            </td>
                        </tr>`
            }
            $('#mailbox tbody').html(str)
            $('.box').hide(500)
            $('.hideobj').hide(500)
        }
        // 加入购物车
        $('tbody:first').click(function () {
            if (event.target.nodeName == 'A') {
                if ($(event.target).attr('data-shop') === 'shop') {
                    let index = $(event.target).attr('data-id')
                    shopCarList.push({
                        name: goodsList[index].name,
                        price: goodsList[index].price,
                        stock: goodsList[index].stock
                    })
                    saveData()
                    showGoodsList()
                     countPrice()
                }
            }
        })
        // 删除
        function del (index) {
            // var x = shopCarList.findIndex(function (item,i) {
            //     if (item.id == goodsList[index].id) {
            //         return true
            //     }
            // })
            // shopCarList.splice(x,1)
            // shopCarList.splice(index,1)
            // localStorage.setItem('goodsList',JSON.stringify(goodsList))
            // showShopCarList()
            // saveData()
            // showShopCarList()
            // countPrice()
        }

        // 下面的商品表格
        function showGoodsList() {
            shopCarList = localStorage.getItem('shopList') ? JSON.parse(localStorage.getItem('shopList')) : shopCarList
            var strHtml = ''
            for (let i in shopCarList) {
                strHtml += `<tr>
                                <td><input type="checkbox" data-id="${i}"></td>
                                <td>${shopCarList[i].name}</td>
                                <td id='sum'>${shopCarList[i].price}</td>
                                <td>
                                    <input type="button" value="-" style="width: 20px;height: 20px" onclick="updateNumDown(${i}.this)">
                                    <input type="number" data-id="${i}" id='inpval' min="0" value="${shopCarList[i].num}" class="num" />
                                    <input type="button" value="+" style="width: 20px;height: 20px" onclick="updateNumUp(${i},this)">
                                </td>
                            </tr>`
            }
            $('tbody:last').html(strHtml)
        }
        // 全选
        $('#quanxuan').click(function () {
            $('#tbody2 input').prop('checked', $(this).prop('checked'))
            for (let i in shopCarList) {
                shopCarList[i].status = $(this).prop('checked')
            }
            saveData()
            countPrice()
        })
        // 计算金额
        function countPrice() {
            var total = 0
            $('#tbody2 input:checkbox').each(function (index, item) {
                if ($(item).prop('checked')) {
                     total += parseInt($('#sum').html()) * $('#inpval').val()
                    // var sum = $('#sum').html()
                    // var num = $('#num[data-id]').val()
                    // total += (sum * num)
                    $('#box p span').html(total)
                }
            })
            // showGoodsList()
            
        }
        // --
        function updateNumDown(index, obj) {
            if (goods[index].num == 0) {
                return
            }
            $(obj).next().val(--shopCarList[index].num)
            countPrice()
            saveData()
        }
        // ++
        function updateNumUp(index, obj) {
            $(obj).prev().val(++shopCarList[index].num)
            countPrice()
            saveData()
        }
        // 本地存储
        function saveData() {
            localStorage.setItem('shopList', JSON.stringify(shopCarList))
        }
    })




</script>

</html>